<template>
  <div class="home-container light">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="65px" @mousedown="handleMouseDown">
        <!-- 退出登录项 -->
        <div class="sidebar-item" @click="handleLogout">
          <div class="sidebar-item-icon">
            <img class="sidebar-icon" :src="tuichuSvg" alt="退出登录" style="width: 60px; height: 30px" />
          </div>
          <div class="sidebar-item-title">退出</div>
        </div>
        <!-- 个人项 -->
        <div class="sidebar-item sidebar-item-person" @click="handleSelect('3')">
          <div class="sidebar-item-icon">
            <img :src="geRen2Svg" style="width: 60px; height: 30px" />
          </div>
          <div class="sidebar-item-title">个人</div>
        </div>
      </el-aside>
      <!-- 主体内容 -->
      <el-container>
        <!-- 头部导航栏 -->
        <el-header @mousedown="handleMouseDown">
          <div class="header-item" @click="handleSelect('1')" :class="{ active: activeIndex === '1' }">
            任务
          </div>
          <div class="header-item" @click="handleSelect('2')" :class="{ active: activeIndex === '2' }">
            奖励
          </div>
        </el-header>
        <!-- 主要内容区域 -->
        <el-main>
          <Task v-if="activeIndex === '1'" />
          <Award v-if="activeIndex === '2'" />
          <Personal v-if="activeIndex === '3'" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { logout } from '@renderer/api/login/index'
import { Session } from '@renderer/utils/storage'
import { ElMessageBox } from 'element-plus'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Award from '@renderer/views/Menu/Award.vue'
import Personal from '@renderer/views/Menu/Personal.vue'
import Task from '@renderer/views/Menu/Task.vue'
// 引入 SVG 文件
import { useUserInfo } from '@renderer/stores/userInfo'
import geRen2Svg from '@renderer/views/assets/geRen2.svg'
import tuichuSvg from '@renderer/views/assets/tuichu.svg'

const router = useRouter()
const activeIndex = ref('1') // 当前选中的导航项索引

// 处理导航项点击事件
const handleSelect = (index: string) => {
  activeIndex.value = index
}

// 页面加载时执行查询任务数据
onMounted(() => {
  const data = useUserInfo().userInfos
  console.log('User is logged in:', data.isLogin)
})

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      // 1. 清除后端 token
      logout()
      // 2. 清除前端缓存/token 等
      Session.clear()
      // 3. 跳转到登录页面
      router.push('/login')
    })
    .catch(() => {
      // 用户点击了取消
    })
}

// 鼠标按下状态
const isKeyDown = ref(false)
// 鼠标按下时的坐标
const startX = ref(0)
const startY = ref(0)

// 处理鼠标按下事件
const handleMouseDown = (e: MouseEvent) => {
  isKeyDown.value = true
  startX.value = e.x
  startY.value = e.y

  // 处理鼠标移动事件
  document.onmousemove = (ev: MouseEvent) => {
    if (isKeyDown.value) {
      const x = ev.screenX - startX.value
      const y = ev.screenY - startY.value
      // 给主进程传入坐标
      const data = {
        appX: x,
        appY: y
      }
      Electron.ipcRenderer.invoke('custom-adsorption', data)
    }
  }

  // 处理鼠标释放事件
  document.onmouseup = () => {
    isKeyDown.value = false
  }
}
</script>

<style scoped>
/* 主容器样式 */
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  width: 100vw;
}

/* 主题样式 */
.light {
  background-color: rgb(255, 255, 255);
  color: black;
}

.el-container {
  height: 100%;
  width: 100%;
}

/* 侧边栏样式 */
.el-aside {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  background-image: linear-gradient(to right top, #526aee, #6e83d6);
  width: 65px;
}

/* 侧边栏项样式 */
.sidebar-item {
  margin-top: 30px;
  cursor: pointer;
}

/* 侧边栏项图标样式 */
.sidebar-item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 侧边栏项标题样式 */
.sidebar-item-title {
  padding: 0;
  margin: 0;
  color: white;
  font-size: large;
}

/* 侧边栏项悬停样式 */
.sidebar-item:hover {
  color: #626aef;
  border-radius: 10px;
}

.sidebar-item-title:hover {
  color: #626aef;
}

/* 隐藏滚动条 */
.el-aside::-webkit-scrollbar {
  display: none;
}

/* 头部导航栏样式 */
.el-header {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgb(246, 247, 248);
  padding: 10px 0;
}

/* 头部导航栏项样式 */
.header-item {
  margin-left: 30px;
  font-size: larger;
  font-weight: 500;
  cursor: pointer;
}

/* 头部导航栏项悬停样式 */
.header-item:hover {
  color: #626aef;
}

/* 头部导航栏项激活样式 */
.header-item.active {
  color: #626aef;
  text-decoration: underline #626aef 3px;
  text-decoration-skip-ink: 140px;
}

/* 侧边栏图标样式 */
.sidebar-icon {
  padding: 0;
  margin: 0;
}
</style>
